<template>
  <section>
    <el-form :rules="rules" ref="userForm" :model="userForm" label-width="80px" :inline="true">
      <el-form-item label="姓名"  prop="name">
        <el-input size="mini" v-model="userForm.name" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio v-model="userForm.gender" label="1">男</el-radio>
        <el-radio v-model="userForm.gender" label="2">女</el-radio>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input size="mini" v-model="userForm.phone" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-input size="mini" v-model="userForm.birthday" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="邮件">
        <el-input size="mini" v-model="userForm.email" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="婚姻">
        <el-switch size="mini" v-model="userForm.isMarried" active-text="已婚" inactive-text="未婚"/>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="createUser('userForm')" size="mini">立即创建</el-button>
        <el-button @click="resetForm('userForm')" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "createUser",
    props:['newName'],
    data() {
      return {
        userForm:{ name:'', gender:'', phone:'', birthday:'', email:'', isMarried:''},
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 2 到 5 个字符', trigger: 'blur'}
          ],
          gender:[
            { required: true, message: '请确认性别', trigger: 'change' }
          ],
          phone:[
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {min: 11, max: 11, message: '长度为11', trigger: 'blur'}
          ],
        }
      }
    },
    created(e){
      this.userForm.name = this.newName
    },
    watch:{
      newName(nv,ov){
        this.userForm.name = nv
      }
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      createUser(userForm){
        this.$refs[userForm].validate((valid) => {
          if (valid) {
            //这里做创建的事儿
            this.fetch({name:"createCustomerByAdmin",data:{...this.userForm}})
              .then(res=>{
                //创建成功，关掉对话框
                console.log(res)
                this.$message({type:'sucess',message:'创建成功'})
                this.$emit('cancel',res)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      resetForm(userForm){
        console.log(this.userForm)
        this.$emit('cancel',this.userForm)
        // console.log(this.$refs[userForm].resetFields())
        // this.$refs[userForm].resetFields()
        // //重置不完全
        // for(let key in this.userForm){
        //   this.userForm[key]=''
        // }
      },
    }
  }
</script>

<style scoped>

</style>
